<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.most{
				color: red;
			}
		</style>
		<script>
			
		</script>
	</head>
	<body>
		<h1>查询节点的方式</h1>
		<p class="most">1.根据<b>id</b>查询</p>
		<p class="most">2.根据<b>便签</b>查询</p>
		<p>3.根据<b>名称</b>查询</p>
		<p>4.根据<b>class</b>查询</p>
		<p class="most">5.根据<b>层次</b>查询</p>
		
		<div>
			<input type="radio" name="sex" value="male">男
			<input type="radio" name="sex" value="male">女
		</div>
		<ul id="city">
			<li id="sh">上海</li>
			<li id="wh">武汉</li>
			<li id="cs">长沙</li>
			<li>深圳</li>
		</ul>
	</body>
	<script>
		console.log("1-----id-----")
		var ps = document.getElementsByTagName("p")
		console.log(ps)
		console.log("2-----名称-----")
		var radios = document.getElementsByName("sex")
		console.log(radios)
		console.log("3-----class-----")
		var pps =  document.getElementsByClassName("most")
		console.log(pps)
		console.log("4-----层次-----")
		//获取孩子和父亲
		var ul = document.getElementById("city")
		// console.log(ul.childNodes)
		console.log(ul.children)
		
		var wh = document.getElementById("wh")
		console.log(wh.parentNode)
		
		//获取特定的孩子
		console.log(ul.firstElementChild)//第一个孩子
		console.log(ul.lastElementChild)//最后一个孩子
		console.log(ul.children[2])
		
		//获取兄弟
		//获取上一个元素
		console.log(wh.previousElementSibling)
		//获取下一个元素
		console.log(wh.nextElementSibling)
		//获取某一个元素
		console.log(wh.parentNode.children[3])
		
		//增删节点
		console.log("-----增加-----")
		//创建新节点
		var li1 = document.createElement("li")
		li1.innerHTML = "杭州"
		//添加插入新节点
		// ul.appendChild(li1)
		//添加li1插入到ul下武汉前面
		ul.insertBefore(li1,wh)
		//删除节点
		//通过父亲删除孩子
		var cs = document.getElementById("cs");
		// ul.removeChild(cs)
		cs.remove()
		
	</script>
</html>